
<script setup lang="ts">
// import injectProvide from "./injectProvide.vue";
import { defineAsyncComponent } from "vue";

const VuexPage = defineAsyncComponent(() => import("./Vuex.vue"));
const PiniaPage = defineAsyncComponent(() => import("./Pinia.vue"));

const useDragPage = defineAsyncComponent(() => import("./useDrag/useDrag.vue"));
</script>


<template>
  <div class="index-wrap">
    <!-- <router-link to="/reactive">
      <h1>reactive Page</h1>
    </router-link>
    <router-link to="/reactiveAPI">
      <h1>reactiveAPI Page</h1>
    </router-link>

    <router-link to="/watch">
      <h1>watch Page</h1>
    </router-link> -->

    <!-- <injectProvide /> -->

    <!-- vuex -->
    <!-- <VuexPage />
    <div class="btn-wrap" @click="$store.commit('decrement')">最外层Vuex--</div> -->


    <!-- pinia -->
    <!-- <PiniaPage /> -->

    <!-- 拖拽 -->
    <useDragPage />

  </div>
</template>



<style>
.index-wrap {
  margin: 200px auto;
  width: 1000px;
}
h1 {
  text-align: center;
}
</style>
